<template>
    <section style="padding: 24px; background:#fff;">
        <a-form-model ref="ruleForm" :model="webInfo" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item ref="webSizeTitle" label="网站名称" prop="webSizeTitle">
                <a-input v-model="webInfo.webSizeTitle" placeholder="请您输入网站名称!"/>
            </a-form-model-item>
            <a-form-model-item ref="keywords" label="关键字" prop="keywords">
                <a-input v-model="webInfo.keywords" placeholder="关键字用 “ , ” 隔开" />
            </a-form-model-item>
            <a-form-model-item label="描述" prop="description">
                <a-input v-model="webInfo.description" type="textarea" placeholder="请您输入描述!"/>
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                <a-button type="primary" @click="updateSeoInfo">
                    更新
                </a-button>
                <a-button style="margin-left: 10px;" @click="resetForm">
                    重置
                </a-button>
            </a-form-model-item>
        </a-form-model>
    </section>
</template>
<script>
import { getSeoInfo, getWebSizeTitle,updateWebSizeSeo,updateWebSizeTitle } from '@/api/api'
export default {
    data() {
        return {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
            other: '',
            webInfo: {
                webSizeTitle: '',
                keywords: '',
                description: ''
            },
            oldInfo: {
                webSizeTitle: '',
                keywords: '',
                description: '',
            },
            rules: {
                webSizeTitle: [
                    { required: true, message: '请输入网站名称!' },
                ],
                keywords: [{ required: true, message: '请输入关键字!', trigger: 'change' }],
                description: [{ required: true, message: '请输入描述!', trigger: 'change' }],
            },
        };
    },
    methods: {
        updateSeoInfo() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    let isSeoInfoupdate = false;
                    if (this.webInfo.description !== this.oldInfo.description || this.webInfo.keywords !== this.oldInfo.keywords) {
                        isSeoInfoupdate = true;
                        updateWebSizeSeo(this.webInfo.description, this.webInfo.keywords).then(result => {
                            if (result.code === 200) {
                                this.$message.success(result.data);
                                this.getSeoInfoFn();
                            } else {
                                this.$message.error('网站信息更新失败');
                            }
                        });
                    }
                    //如果是更新seo信息，就不做标题更新的提示
                    //提交数据
                    if (this.webInfo.webSizeTitle !== this.oldInfo.webSizeTitle) {
                        //更新一下标题
                        updateWebSizeTitle(this.webInfo.webSizeTitle).then(result => {
                            if (result.code === 200) {
                                if (!isSeoInfoupdate) {
                                    this.$message.success(result.data);
                                }
                                this.getWebSizeInfoTitleFn();
                            } else {
                                this.$message.error('网站标题更新失败');
                            }
                        });
                    }
                } else {
                    return false;
                }
            });
        },
        //重置
        resetForm() {
            this.$refs.ruleForm.resetFields();
        },
        getSeoInfoFn() {
            getSeoInfo().then(res => {
                if (res.code === 200) {
                    this.webInfo.keywords = res.data['web_size_keywords'];
                    this.webInfo.description = res.data['web_size_description'];
                    this.oldInfo.keywords = this.webInfo.keywordsds;
                    this.oldInfo.description = this.webInfo.description;
                }
            })
        },
        getWebSizeInfoTitleFn() {
            getWebSizeTitle().then(res => {
                if (res.code === 200) {
                    this.webInfo.webSizeTitle = res.data.value;
                    this.oldInfo.webSizeTitle = this.webInfo.webSizeTitle
                }
            })
        },
    },
    mounted() {
        this.getSeoInfoFn();
        this.getWebSizeInfoTitleFn();
    },
};
</script>
